<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>样式绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .colorstyle {
            height: 200px;
            width: 200px;
        }

        .borderstyle {
            border: 1px solid black;
        }

        .app3color {
            background: #5c6b77;
        }

        .app3border {
            width: 200px;
            height: 200px;
        }

        .app4color {
            background: #0d5353;
        }

        .app4width {
            width: 200px;
            height: 200px;
        }

        .app4border {
            border: 3px solid red;
        }

        .app5width {
            width: 200px;
            height: 200px;
        }

        .app5border {
            border: 6px solid red;
        }
    </style>
</head>

<body>
<fieldset>
    <legend>内联</legend>
    <div id="app">
        <p :style="{color:color,fontSize:fontStyle+'px'}">内联样式</p>
    </div>
</fieldset>

<fieldset>
    <legend>对象</legend>
    <div id="app2">
        <div :class="{colorstyle:colorflg,borderstyle:borderflg}"></div>
        <p>{{msg}}</p>
    </div>
</fieldset>

<fieldset>
    <legend>数组</legend>
    <div id="app3">
        <div :class="[color,border]"></div>
        <p>{{msg}}</p>
    </div>
</fieldset>

<fieldset>
    <legend>计算属性方式</legend>
    <div id="app4">
        <div :class="setclass"></div>
        <p>{{msg}}</p>
    </div>
</fieldset>

<fieldset>
    <legend>对象和数组混用</legend>
    <div id="app5">
        <div :class="[{app5border:app5borderflg},app5width]"></div>
    </div>
</fieldset>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            color: 'red',
            fontStyle: '18'
        }
    });

    let app2 = new Vue({
        el: '#app2',
        data: {
            colorflg: true,
            borderflg: true,
            msg: `
                :class="{colorstyle:colorflg,borderstyle:borderflg}"
                对象语法
                前面是类名，后面是data绑定的参数，是一个布尔值，true显示false不显示
                data: {
                      colorflg: true,
                      borderflg: true
                  }
            `
        }
    });
    /*
    * :class="{colorstyle:colorflg,borderstyle:borderflg}"
    * >>>对象语法
    * 前面是类名，后面是data绑定的参数，是一个布尔值，true显示false不显示
    * data: {
    *       colorflg: true,
    *       borderflg: true
    *   }
    * */

    let app3 = new Vue({
        el: '#app3',
        data: {
            color: 'app3color',
            border: 'app3border',
            msg: `
            :class="[color,border]"
            >>>数组语法
            数组内每一项都在data内对应一个类名
            data: {
                  color: 'app3color',
                  border: 'app3border'
             }
            `
        }
    });
    /*
    * :class="[color,border]"
    * >>>数组语法
    * 数组内每一项成员都在data内对应一个类名
    * data: {
    *       color: 'app3color',
    *       border: 'app3border'
    *  }
    * */

    let app4 = new Vue({
        el: '#app4',
        data: {
            borderorwidth: {
                border: 'no',
                width: true
            },
            msg:`
            通过计算属性绑定样式（绑定多个类时使用）
            通过计算属性返回一个对象
            对象key是对应的每个类名
            对象value可以根据data内条件进行布尔值决定是否引用该样式
            app4width: this.borderorwidth.width
            app4border: this.borderorwidth.border === 'yes'
            border和width分别根据data内对象borderorwidth的两个属性来决定是否显示
            `
        },
        computed: {
            setclass: function () {
                return {
                    app4color: true,
                    app4width: this.borderorwidth.width,
                    app4border: this.borderorwidth.border === 'no',
                }
            }
        }
    });
    /*
    * >>>通过计算属性绑定样式（绑定多个类时使用）
    * 通过计算属性返回一个对象
    * 对象key是对应的每个类名
    * 对象value可以根据data内条件进行布尔值决定是否引用该样式
    * app4width: this.borderorwidth.width
    * app4border: this.borderorwidth.border === 'yes'
    * border和width分别根据data内对象borderorwidth的两个属性来决定是否显示
    * */

    let app5 = new Vue({
        el: '#app5',
        data: {
            app5borderflg: true,
            app5width: 'app5width'
        }
    })
</script>
</body>

</html>